<template>
  <div>
    <!-- 此处注意写法v-model:content -->
    <QuillEditor ref="myQuillEditor" theme="snow" v-model:content="content" :options="data.editorOption"
      contentType="html" @update:content="setValue()" />
    <!-- 使用自定义图片上传 -->
    <input type="file" hidden accept="image/*, video/*" ref="fileBtn" @change="handleUpload" />
  </div>
</template>

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { reactive, onMounted, ref, toRaw, watch } from "vue";
import http from "@/api/build.js";
const props = defineProps(["value"]);
const emit = defineEmits(["updateValue"]);
const content = ref("");
const myQuillEditor = ref();
// 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
watch(
  () => props.value,
  (val) => {
    toRaw(myQuillEditor.value).setHTML(val);
  },
  { deep: true }
);
const fileBtn = ref();
const data = reactive({
  content: "",
  editorOption: {
    language: 'zh-CN',
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'font': [] }],
        [{ 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'header': 1 }, { 'header': 2 }],
        ["link", "image"],
        [{ 'direction': 'rtl' }],
        [{ 'color': [] }, { 'background': [] }]
      ],
    },
    placeholder: "请输入内容...",
  },
});
const imgHandler = (state) => {
  if (state) {
    fileBtn.value.click();
  }
};
// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
const setValue = () => {
  const text = toRaw(myQuillEditor.value).getHTML();
  emit("updateValue", text);
};
const handleUpload = (e) => {
  const files = Array.prototype.slice.call(e.target.files);
  if (!files) {
    return;
  }

  const formdata = new FormData();
  console.log(files[0], "files[0]");
  // return
  formdata.append("file", files[0]);
  http.upload(formdata).then((res) => {
    if (res.data.download_url) {
      const quill = toRaw(myQuillEditor.value).getQuill();
      const length = quill.getSelection().index;
      if (files[0].type == "video/mp4") {
        quill.insertEmbed(length, "video", res.data.download_url);
      } else {
        quill.insertEmbed(length, "image", res.data.download_url);
      }
      quill.setSelection(length + 1);
    }
  });
  // backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
  //   .then(res => {
  //     if (res.data.url) {
  //       const quill = toRaw(myQuillEditor.value).getQuill()
  //       const length = quill.getSelection().index
  //       quill.insertEmbed(length, 'image', res.data.url)
  //       quill.setSelection(length + 1)
  //     }
  //   })
};
// 初始化编辑器
onMounted(() => {
  const quill = toRaw(myQuillEditor.value).getQuill();
  if (myQuillEditor.value) {
    quill.getModule("toolbar").addHandler("image", imgHandler);
  }
});
</script>
<style scoped>
:deep(.ql-editor) {
  min-height: 180px;
}

:deep(.ql-formats) {
  height: 21px;
  line-height: 21px;
}
</style>
<style>
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "请输入链接地址:" !important;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px !important;
  content: '保存' !important;
  padding-right: 0px !important;
}

.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "请输入视频地址:" !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: '10px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: '18px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: '32px' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6' !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体' !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '衬线字体' !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '等宽字体' !important;
}
</style>
